
import { Image, Row, Col, Button, Tabs, TabPanel, Cell, Calendar } from 'tdesign-mobile-react'
import "../events/index.scss";
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';


function Events() {
    const navigate = useNavigate();
    const [active, setActive] = useState(1);

    let tabOption = [
        {
            value: 1,
            label: "竞彩足球"
        }, {
            value: 2,
            label: "竞彩篮球"
        }
    ];
    const setCalendarVisible = () => {
        footBallOption.visible = !footBallOption.visible;
        setBall({
            ...footBallOption
        });
    }
    const [footBallOption, setBall] = useState({
        visible: false,
        value: null,
    });
    const formatDate = (d) => {
        const date = new Date(d);
        return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    }

    const timeChange = function(){
        console.log("发送请求"); // 此处发送赛事筛选请求
    }

    useEffect(timeChange,[footBallOption.value])

    function TabContent() {
        switch (active) {
            case 1:
                return (<>
                    <div className='football'>
                        <Cell title="显示时间" arrow onClick={setCalendarVisible} note={formatDate(footBallOption.value)}></Cell>
                        <Calendar
                            visible={footBallOption.visible}
                            switchMode="year-month"
                            value={footBallOption.value}
                            onConfirm={(e) => {
                                footBallOption.value = e;
                                setBall({
                                    ...footBallOption
                                });
                            }}
                            onClose={setCalendarVisible}
                        ></Calendar>
                    </div>
                </>);
            case 2:
                return (<>
                    2
                </>);
        }
    }

    return (<>
        <Tabs defaultValue={1} onChange={(e) => setActive(e)}>
            {tabOption.map((item) => (<TabPanel key={item.value} value={item.value} label={item.label}></TabPanel>))}
        </Tabs>
        {TabContent()}
    </>)
}

export default Events;